<template>
  <div class="withdraw-container">
    <div class="withdraw-section">
     <!-- <u--input class="withdraw-input" prefixIcon="account" placeholder="请输入姓名" border="bottom" clearable v-model="name"
        @input="validateName"></u--input> -->
		<u--input class="withdraw-input" prefixIcon="account" placeholder="请输入姓名" border="bottom" clearable v-model="name"
		  ></u--input>
      <!-- <u--input class="withdraw-input" prefixIcon="zhifubao" placeholder="请输入支付宝账号" border="bottom" clearable -->
        <!-- v-model="alipayAccount" @input="validateAlipayAccount"></u--input> -->
		<u--input class="withdraw-input" prefixIcon="zhifubao" placeholder="请输入支付宝账号" border="bottom" clearable
		  v-model="alipayAccount" ></u--input>
      <div class="withdraw-row">
        <div class="withdraw-label">提现金额</div>
        <u--input class="withdraw-input" prefixIcon="rmb" placeholder="请输入提现金额" border="bottom" clearable
          v-model="withdrawAmount" @input="validateAmount"></u--input>
      </div>
      <div class="withdraw-info">
        <span class="info-text"><span class="grey-text">本次可提现金额：</span>￥{{ availableAmount }}</span>
        <span class="withdrawable-amount" @click="withdrawAll">全部提现</span>
      </div>
    </div>

    <!-- <div class="middle-row"> -->
      <!-- <span class="withdraw-to">提现至</span> -->
      <!-- <div class="withdraw-method"> -->
        <!-- <img class="withdraw-icon" src="/static/11.png" alt="微信钱包"> -->
        <!-- <span>微信钱包</span> -->
      <!-- </div> -->
    <!-- </div> -->

    <div class="middle-row">
      <u-button type="primary" color="#4262F1" shape="circle" @click="withdrawNow">立即提现</u-button>
    </div>

    <div class="history-link" @click="goToPage('/pages/profile/history')">
      <span class="withdrawable-amount">提现明细</span>
    </div>
  </div>
</template>

<script>
import { takeIncome, getIncomeList } from "@/api/apiService";
import CryptoJS from "crypto-js";

export default {
  data() {
    return {
      name: '',
      alipayAccount: '',
      withdrawAmount: '',
      availableAmount: '0.00',
      ipAddress: '',
      token: ''
    };
  },

  created() {
    this.getIpAddress()
    this.token = uni.getStorageSync('token');
  },

  onShow() {
    this.getIncomeListrequest()
  },

  methods: {


    async getIncomeListrequest() {
      const params = {
      };

      const response = await getIncomeList(params);
      this.availableAmount = response.data.wait_income
    },

    // 跳转页面
    goToPage(routePath) {
      this.$goToPage(routePath);
    },

    // 全部提现
    withdrawAll() {
      this.withdrawAmount = this.availableAmount;
    },

    // 获取IP地址
    async getIpAddress() {
      try {
        const response = await fetch('https://api.ipify.org?format=json');
        const data = await response.json();
        this.ipAddress = data.ip;
      } catch (error) {
        console.error('获取IP地址失败', error);
      }
    },

    // 立即提现
    async withdrawNow() {
      const time = Math.floor(Date.now() / 1000).toString();
      const signString = `qqqqqq${this.token}${this.name}${this.alipayAccount}${time}qqqqqq`;
      const sign = CryptoJS.MD5(signString).toString();

      if (parseFloat(this.withdrawAmount) > parseFloat(this.availableAmount)) {
        alert('提现金额不能大于可提现金额');
      } else {
        let params = {
          price: this.withdrawAmount,
          name: this.name,
          card: this.alipayAccount,
          time: Math.floor(Date.now() / 1000).toString(),
          ip: this.ipAddress,
          sign,
        }
        try {
          const response = await takeIncome(params);
          console.log(response);
          if (response.success) {
            alert('提交成功');
            this.getIncomeListrequest()
			this.withdrawAmount = ""
			this.name = ""
			this.alipayAccount = ""
          } else {
            alert(response.msg);
            this.getIncomeListrequest()
          }
        } catch (error) {
          this.getIncomeListrequest()
          console.error('提现请求失败', error);
          alert('提现请求失败，请检查网络连接');
        }
      }
    },

    // 验证姓名输入，只允许中文
    validateName() {
      this.name = this.name.replace(/[^\u4e00-\u9fa5]/g, '');
    },

    // 验证支付宝账号输入，只允许手机号
    // validateAlipayAccount() {
    //   this.alipayAccount = this.alipayAccount.replace(/[^0-9]/g, '').slice(0, 11);
    // },

    // 验证提现金额，只允许数字和最多两位小数
    validateAmount() {
      const value = this.withdrawAmount;
      const reg = /^\d*(\.\d{0,2})?$/;
      if (!reg.test(value)) {
        this.withdrawAmount = value.slice(0, -1);
      }
    }
  }
};
</script>

<style scoped>
.withdraw-container {
  background-color: #F6F6F6;
}

.withdraw-section {
  background-color: white;
  margin-top: 10px;
  padding: 10px;
}

.withdraw-input {
  width: 100%;
  padding: 10px;
  margin-bottom: 14px;
}

.withdraw-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.withdraw-label {
  margin: 20px 10px;
  font-size: 11px;
}

.withdraw-info {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
}

.info-text {
  font-size: 12px;
}

.grey-text {
  color: rgb(153, 153, 153);
}

.withdrawable-amount {
  font-size: 14px;
  color: #4262F1;
  cursor: pointer;
}

.middle-row {
  background-color: white;
  margin-top: 10px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.withdraw-to {
  font-size: 14px;
}

.withdraw-method {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.withdraw-icon {
  width: 20px;
  margin: 3px;
}

.history-link {
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px;
}
</style>
